<script setup>
	import Dialog from './dialog.vue'
	import {
		reactive,
		computed
	} from 'vue'
	import http from '@/api/userAPI'

	import {
		getNavigationBarInfo
	} from '@/utils/common'
	import {
		onLoad
	} from "@dcloudio/uni-app";

	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()

	const data = reactive({
		isOpen: false,
		userinfo: {},
		navigationBarInfo: {
			statusBarHeight: 0,
			navigationHeight: 44
		}
	})

	onLoad(async () => {
		// #ifdef MP
		data.navigationBarInfo = getNavigationBarInfo()
		// #endif

		// console.log(data.userinfo);

		//获取用户信息
		await userStore.user.getUserinfo()

		data.userinfo = userStore.user.userInfo

	});

	const containterStyle = computed(() => {
		return {
			'height': (data.navigationBarInfo.navigationHeight + data.navigationBarInfo.statusBarHeight) + 'px',
			'position': 'relative'
		}
	})
	
	const dialogStyle = computed(()=>{
		return {
			'top':(data.navigationBarInfo.navigationHeight + data.navigationBarInfo.statusBarHeight) + 'px',
			'marginTop':"40rpx;"
		}
	})
</script>

<template>
	<!-- <view class="safeAres"></view> -->
	<view :style="containterStyle">
		<view style="position: absolute;bottom: 30rpx;left: 0;right: 0;">
			<view class="logo">
				<text>IVMCR</text>
				<text style="position:relative;">
					<text class="day"> · 7 DAYS</text>
				</text>
			</view>
		</view>
	</view>

	<view class="nav">
		<text class="day" :class="{ isActive: i < data.userinfo.days }" v-for="(, i) in 7" :key="i">{{ i + 1 }}</text>
		<image class="icon" @click.stop="data.isOpen = !data.isOpen" src="/static/icon/smile.png" mode="aspectFit" />
	</view>
	<view class="dialog" :class="{ isOpen: data.isOpen }" :style="dialogStyle">
		<Dialog v-model="data.isOpen" />
	</view>
</template>

<style lang="scss" scoped>
	// .safeAres{
	// 	padding-top:env(safe-area-inset-top)
	// }
	
	.logo {
		margin: 0 auto;
		position: relative;
		width: fit-content;

		>text {
			display: block;
			color: rgb(0, 0, 0);
			font-size: 16rpx;
			font-weight: 600;
			line-height: 22rpx;
			letter-spacing: 6rpx;
			text-align: left;
		}

		.day {
			margin-top: -2rpx;
			letter-spacing: 0;
		}

		.ver {
			position: absolute;
			padding-left: 10rpx;
			font-size: 12rpx;
			letter-spacing: 0rpx;
		}
	}

	.nav {
		display: flex;
		justify-content: center;
		align-items: center;

		.day {
			// margin: 0 15rpx;
			padding: 15rpx;
			color: rgb(0, 0, 0);
			font-size: 20rpx;
			font-weight: 600;
			line-height: 20rpx;
			text-align: center;

			&.isActive {
				color: #c18813;
			}
		}

		.icon {
			// margin-right: -10rpx;
			// margin-left: 23rpx;
			padding: 6rpx 4rpx;
			width: 30rpx;
			height: 30rpx;
			overflow: visible;
		}
	}

	.dialog {
		position: fixed;
		top: 200rpx;
		left: 0;
		width: 100%;
		height: 0;
		transition: height 0.2s cubic-bezier(0.4, 0.21, 0.68, 0.03);
		z-index: 999;
		overflow: hidden;
		background-color: #fff;

		&.isOpen {
			height: calc(100% - 200rpx);
		}
	}
</style>